.reader-feed-header {
	display: flex;
	flex-direction: column;
	margin: 0 auto;
	margin-bottom: 40px;
	position: relative;
	z-index: z-index( 'root', '.reader-feed-header' );

	@include breakpoint( "<660px" ) {
		margin: 20px 13px;
	}

	.site__content {
		display: flex;
		flex-direction: column;
		padding: 0;
	}

	.site .site-icon {
		height: 96px !important;
		margin-right: 0;
		width: 96px !important;

		&.is-blank {
			display: none;
		}
	}

	.site__info {
		margin-top: 20px;
		width: 100%;
	}

	.site__title {
		font-family: $serif;
		font-size: 21px;
		font-weight: 600;
		overflow: hidden;
		position: relative;
		text-align: center;
		white-space: normal;

		&::after {
			background: none;
			content: '';
			height: 22px;
			@include long-content-fade( $size: 15% );
			top: calc( 100% - 32px );

			@include breakpoint( ">660px" ) {
				@include long-content-fade( $size: 10% );
				top: 0;
			}
		}

		@include breakpoint( ">660px" ) {
			height: 30px;
		}
	}

	.site__domain {
		display: none;
	}

	.reader-feed-header__back-and-follow {
		display: flex;
		height: 0;
		margin-left: auto;

		@include breakpoint( "<960px" ) {
			height: auto;
			justify-content: center;
			margin-left: 0;
		}

		.reader-feed-header__follow {
			display: flex;
			flex: 1 0 auto;
			flex-direction: row;
			justify-content: flex-end;
			z-index: z-index( '.reader-feed-header__back-and-follow', '.reader-feed-header__follow' );
				position: relative;
					top: -4px;

			@include breakpoint( "<960px" ) {
				justify-content: center;
				margin-bottom: 10px;
			}
		}
	}

	.reader-feed-header__site {
		z-index: z-index( '.reader-feed-header', '.reader-feed-header__site' );
	}

	&.has-back-button {

		.reader-feed-header__back-and-follow {
			height: 0;
			flex-direction: row;
			justify-content: space-between;
			margin-left: 0;

			.reader-feed-header__follow {
				display: flex;
				flex-direction: row;
				flex: 1;
				justify-content: flex-end;
			}
		}

		.reader-feed-header__site {
			margin-top: 0;
		}
	}

	.reader-feed-header__details {
		font-size: 14px;
		text-align: center;
	}

	.reader-feed-header__follow-count {
		color: $gray-text-min;
		font-size: 14px;
	}

	.reader-feed-header__follow-button .follow-button {
		margin-left: 20px;
		padding: 0;

		.gridicon {
			fill: $blue-medium;
		}

		.follow-button__label {
			color: $blue-medium;

			@include breakpoint( "<660px" ) {
				display: inline-block;
			}
		}

		&.is-following {

			.gridicon {
				fill: $alert-green;
			}

			.follow-button__label {
				color: $alert-green;
			}
		}
	}
}

.reader-feed-header .reader-feed-header__byline {
	display: block;
}

.reader-feed-header .card {
	background: none;
	box-shadow: none;
	padding: 0;

	@include breakpoint( "<660px" ) {
		box-sizing: border-box;
		padding: 16px;
	}

	&.reader-feed-header__site {
		margin: 0 auto;
		padding: 0;
		width: 100%;
	}
}

// Loading placeholder
.reader-feed-header.is-placeholder {
	pointer-events: none;
	user-select: none;

	.site__title,
	.site__domain,
	.feed-header__description,
	.feed-header__follow-count {
		color: transparent;
		background-color: lighten( $gray, 30% );
		animation: loading-fade 1.6s ease-in-out infinite;
	}
}
